<style lang="scss" scoped>
.box {
    width: 100vw;
    background-color: #ececec;
}

.divitemJia {
    border-bottom: 1px solid #ccc;
    background: #fff;
    width: 98%;
    border-radius: 10px;
    margin-left: 1%;
    margin-top: 10px;


    p {
        padding: 10px;
    }

    span {
        padding: 10px;
        display: flex;
    }

    .divitem {
        display: flex;
        justify-content: space-between;


    }
}

ul {
    display: flex;
    flex-wrap: wrap;

    li {
        padding: 7px 10px;
        border-radius: 50px;
        border: 1px solid #ccc;
        margin-top: 10px;
        margin-left: 10px;
        float: left;
    }
}



.tabs {
    background-color: #fff;
    flex-wrap: wrap;
    /* 阻止文本自动换行 */
    // overflow-x: auto;
    /* 当内容超出容器宽度时，显示水平滚动条 */
    display: flex;
    /* 使用弹性布局 */
    // align-items: center;
    /* 垂直居中对齐 */
    padding: 8px;
    /* 添加内边距，让内容与容器边缘有一定的距离 */
    // text-align: center;
}

.tab {
    padding: 5px 10px;
    margin-bottom: 5px;
    margin-left: 10px;
    background-color: #ececec;
    border-radius: 50px;
}

.active {
    background-color: rgb(30, 112, 255);
    color: #fff;
}
</style>
<template>
    <div class="box">
        <div class="tabs">
            <div v-for="(tab, index) in listTap" :key="index" class="tab" :class="{ active: currentIndex === index }"
                @click="headerTap(tab, index)">
                {{ tab }}
            </div>
        </div>
        <div class="divitemJia" v-for="(v, i) in ListData" :key="i">
            <div class="divitem">
                <p>{{ v.reviewname }}用户**</p>
                <van-rate v-model="v.reviewgood" />
            </div>
            <ul style="display: flex;">
                <li v-for="(item, index) in (v.reviewstate as string).split(',')" :key="index">{{ item }}</li>
            </ul>
            <p>感谢{{ doctorListitem?.doctorname }}医生的回复~</p>
            <span>2023-02-18 00:20:02</span>
        </div>
    </div>
</template>
<script lang="ts" setup>
import type { ListDatagete } from '@/Type/indeType';
import axios from 'axios';
import { ref } from 'vue'
import { useRoute } from 'vue-router';

const route = useRoute()
const listId = ref(route.query.id as string | undefined);
// defineProps(['img'])

const doctorListitem = ref<ListDatagete | null>(null);
const getData = () => {
    axios.get('/api/doctor/detail', { params: { id: listId.value } }).then(res => {
        doctorListitem.value = res.data.data[0]
    })
}
getData()
const listTap = ref([
    '全部',
    '态度非常好',
    '回复很及时',
    '语气温和',
    '讲解很细致',
    '回答很及时',
    '回答很专业',
    '讲解细致耐心',
    '态度很好',
])
const headerText = ref('')
const currentIndex = ref(0);
const headerTap = (v: string, i: number) => {
    currentIndex.value = i
    headerText.value = v
    console.log(headerText.value, 'text', listId.value);
    getList()
}
axios.get('/api/review/classify').then(res => {
    console.log(res.data, 111);
})
interface ListData {
    reviewname: string,
    reviewtitle: string,
    reviewstate: string | string[],
    reviewgood: number
}
const ListData = ref<ListData[]>([])
const getList = () => {
    if (headerText.value === '全部') { headerText.value = '' }
    axios.get('/api/review/list', { params: { id: listId.value, state: headerText.value } }).then(res => {
        console.log(res.data.data, 222);
        ListData.value = res.data.data
    })
}
getList()
axios.get('/api/review/banview', { params: { id: listId.value } }).then(res => {
    console.log(res.data.data, 333)
})
</script>